<!--
 * @Author: hu_binbin
 * @Date: 2021-08-06 09:29:24
 * @LastEditTime: 2021-08-26 16:07:29
 * @Description: 归档列表页
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
		</Theader>

		<!-- 搜索区域 -->
		<div class="search_header center_center">
			<van-search v-model.trim="taskName" clearable @input="focus" background="#F5F6FA" placeholder="搜索变电站">
			</van-search> 
			<van-image class="imgSize" width="23" height="23" @click="screen" :src="icon.screen" />
		</div>

		<!-- 列表区域 -->
		<div class="doc-wrapper">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list
				  offset="0"
				  v-model="loading"
				  :finished="finished"
				  finished-text="没有更多了"
				  @load="onLoad"
				>
				
					<div class="tab-item" @click="gotoFileDetail" v-for="(item,index) in showTaskList" :key="index">
						<!-- <div class="tab-icon">
							<div class="box3">熄灯巡视</div>
						</div> -->
						<div class="tab-title">
							<span>完成</span>
							<label>东善桥变全面巡视</label>
							<!-- <van-tag style="margin-left: 1rem;" plain type="danger" color="#FB716D">标签</van-tag> -->
						</div>
						<div class="tab-sub">
							<span>交花园山变电站</span>
							<label>交流110kv</label>
						</div>
						<div class="tab-per tab-per-flex">
							<div class="flex-center">
								<van-icon size="18" name="user-circle-o" />
								<span style="margin-left: 5px;">巡视人：</span>
								<label>巡视人、巡视人</label>
							</div>
							<!-- <div class="flex-center">
								<span style="color:#FB716D">即将到期</span>
								<van-icon style="margin-left: 5px;" size="18" name="question-o" />
							</div> -->
						</div>
						<div class="tab-time">
							<div class="time-t">
								<van-icon size="18" name="underway-o" />
								<span>巡视计划时间：</span>
							</div>
							<div class="time-cont">2020/06/09 09:21</div>
							<!-- <van-button class="time-b" plain 
							color="#F06D6D" type="primary" size="mini" @click='backList'>调整巡视记录</van-button> -->
						</div>
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
		<van-popup
		@close="showScreen=false"
		v-model="showScreen"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<screen></screen>
		</van-popup>
	</article>
</template>
<script>
	import Theader from "../component/header"
	import screen from "../component/screen.vue"
	export default {
		name: "finishFileList",
		components:{
			Theader,
			screen
		},
		data() {
			return {
				title: "巡视",
				loading:false,
				finished: false,
				refreshing:false,
				showScreen:false,
				icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
					screen:require('../../../../assets/tour/icon-screen.png'),
					add:require('../../../../assets/tour/icon-add.png'),
				},
				showTaskList:[
					{},{}
				],
				taskName: "",//任务名称
			}
		},
		computed: {

		},
		methods: {
			
            back(){
                this.$router.go(-1)
            },
			onRefresh() {

			},
			screen(){
				this.showScreen = true;
			},
			focus() {

			},
			onLoad() {
				
			},
			addTask() {
				
			},
			/**
			* @description: 跳转归档详情页面
			* @param {*}
			* @return {*}
			*/
			gotoFileDetail() {
				this.$router.push({
					name: "cyclelFileDetail",
				})
			},
			subFile() {
				this.$router.push({
					name: "cycleSubTourRecord",
				})
			}
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
	.search_header{
		margin-top: 3.5rem;
		margin-right: 0.7rem;
	}
	.search_header /deep/ .van-search{
		flex:1;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
		border-radius: 0.7rem;
	}

	.doc-wrapper{
		overflow-y: auto;
		height: calc(100% - 212px);
		margin: 0.6rem;
	}
    .tab-item{
        padding: 0.7rem;
		background: #fff;
		position: relative;
		overflow: hidden;
        margin-bottom: 0.7rem;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: #18B49B;
		color: #fff;
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
	.tab-sub{
		margin-bottom: 0.5rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
        display: flex;
        align-items: center;
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
        /* justify-content:space-between; */
	}
	.tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
    .time-t{
        display: flex;
		justify-content: space-between;
    }
	.time-b{
       width: 5.5rem; 
       font-size: 12px;
    }
	.flex-center{
		display: flex;
		align-items: center;
	}
</style>